<template>
  <div id="GenderSpread">
    <div class="GenderSpread-box">
      <div class="box-left-img" v-if="pieBoyData != 0">
        <img src="@/assets/shi/boy.png" alt />
      </div>
      <div class="box-wrap">
        <!-- 进度条 -->
        <div class="box-wrap-top">
          <!-- 左边进度条 -->
          <div class="top-left" :style="{ width: leftWidth }"></div>
          <!-- 右边进度条 -->
          <div class="top-right" :style="{ width: rightWidth }"></div>
        </div>
        <!-- 百分比 -->
        <div class="box-wrap-bottom">
          <div v-if="pieBoyData == 0"></div>
          <div class="bottom-left" v-if="pieBoyData != 0">
            {{ "男性" + pieBoyData + "%" }}
          </div>
          <div class="bottom-right" v-if="pieGirlData != 0">
            {{ "女性" + pieGirlData + "%" }}
          </div>
          <div v-if="pieGirlData == 0"></div>
        </div>
      </div>
      <div class="box-right-img" v-if="pieGirlData != 0">
        <img src="@/assets/shi/girl.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    pieData: Array | Object,
    name: String,
  },
  data() {
    return {
      colorList: [],
      leftWidth: "10%",
      rightWidth: "90%",
      pieBoyData: 0,
      pieGirlData: 0,
      dataArr: [],
    };
  },
  computed: {
    // pieDataValue() {
    //   let arr = this.pieData.map(function (item) {
    //     return item.value;
    //   });
    //   let arrValue = this.scaleValue(arr);
    //   this.leftWidth = arrValue[0] + '%'
    //   this.rightWidth = arrValue[1] + '%'
    //   return arrValue
    // },
    // pieDataName() {
    //   let arr = this.pieData.map(function (item) {
    //     return item.name;
    //   });
    //   return arr;
    // },
  },
  watch: {
    pieData: function (newVal, oldVal) {
      this.isPropsData();
    },
  },
  created() {
    this.dataArr = this.pieData;
    this.isPropsData();
  },
  mounted() {
    this.drawTalentPie();
  },

  methods: {
    isPropsData() {
      if (this.dataArr.length) {
        let arr = this.dataArr.map(function (item) {
          return item.value;
        });
        let total = arr[0] + (arr[1] ? arr[1] : 0);
        this.dataArr.forEach((item, idx) => {
          if (item.name == "男性" || item.name == "男") {
            let roit = ((item.value / total) * 100).toFixed(2);
            this.leftWidth = roit + "%";
            this.pieBoyData = roit;
            if (arr.length == 1) {
              this.pieBoyData = 100;
              this.leftWidth = 100 + "%";
              this.rightWidth = 0 + "%";
            }
          } else {
            let roit = ((item.value / total) * 100).toFixed(2);
            this.rightWidth = roit + "%";
            this.pieGirlData = roit;
            if (arr.length == 1) {
              this.pieGirlData = 100;
              this.leftWidth = 0 + "%";
              this.rightWidth = 100 + "%";
            }
          }
        });
      }
      // if (this.pieData.length == 2) {
      //   this.leftWidth = arrValue[0] + '%';
      //   this.rightWidth = arrValue[1] + '%';
      //   this.pieBoyData = arrValue[0];
      //   this.pieGirlData = arrValue[1];
      // } else if (this.pieData.length == 1) {
      //   //  let arr = this.pieData.map(function (item) {
      //   //   return item.value;
      //   // });
      //   if (this.pieData[0].name == '男性') {
      //     // this.pieBoyData = this.pieData[0].value
      //     this.pieBoyData = 100;
      //     this.leftWidth = 100 + '%';
      //     this.rightWidth = 0 + '%';
      //   } else {
      //     // this.pieGirlData = this.pieData[0].value
      //     this.pieGirlData = 100;
      //     this.leftWidth = 0 + '%';
      //     this.rightWidth = 100 + '%';
      //   }
      // }
    },
    drawTalentPie() {},
    // js 计算百分比的方法
    scaleValue(countArray) {
      var j = eval(countArray.join("+"));
      var resultArray = [];
      for (var i = 0; i < countArray.length; i++) {
        var k = ((countArray[i] / j) * 100).toFixed(2);
        resultArray.push(k);
      }
      return resultArray;
    },
  },
};
</script>
<style lang="less" scoped>
#GenderSpread {
  width: 100%;
  height: 100%;
  // margin-top: 36px;
  .GenderSpread-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
    display: flex;
    justify-content: center;
    align-items: center;
    .box-left-img {
      width: 24px;
      height: 48px;
      margin-right: 11px;
      img {
        width: 24px;
        height: 24px;
      }
    }
    .box-right-img {
      width: 24px;
      height: 48px;
      margin-left: 11px;
      img {
        width: 24px;
        height: 24px;
      }
    }
    .box-wrap {
      width: 60%;
      height: 44px;
      .box-wrap-top {
        width: 100%;
        height: 12px;
        display: flex;
        background-color: #f3ac62;
        border-radius: 100px;
        .top-left {
          width: 10%;
          height: 100%;
          border-radius: 100px;
          // background-color: #1779ff;
          background-color: #6aa9ff;
        }
        .top-right {
          width: 90%;
          height: 100%;
          border-radius: 100px;
          // background-color: #fd7f2c;
          background-color: #f3ac62;
        }
      }
      .border_radius {
        border-radius: 100px;
      }
      .box-wrap-bottom {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
        .bottom-left {
          font-size: 14px;
          font-weight: 500;
          color: #6aa9ff;
        }
        .bottom-right {
          font-size: 14px;
          font-weight: 500;
          color: #f3ac62;
        }
      }
    }
  }
}
</style>
